<template>
  <div 
    class="container-component"
    :class="{
      'show-border': componentData.props.showBorder,
      'show-title-bar': componentData.props.showTitleBar,
      'collapsible': componentData.props.collapsible,
      'collapsed': isCollapsed
    }"
    :style="containerStyle"
  >
    <!-- 标题栏 -->
    <div v-if="componentData.props.showTitleBar" class="container-title-bar">
      <div class="title-text">{{ componentData.props.title || '容器' }}</div>
      <div class="title-actions">
        <button 
          v-if="componentData.props.collapsible"
          class="collapse-btn"
          @click="toggleCollapse"
        >
          <i :class="isCollapsed ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"></i>
        </button>
      </div>
    </div>
    
    <!-- 容器内容 -->
    <div class="container-content" v-show="!isCollapsed">
      <slot>
        <div class="container-placeholder">
          <i class="el-icon-plus"></i>
          <span>拖拽组件到这里</span>
        </div>
      </slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import type { ComponentConfig } from '../../interface'

// Props
interface Props {
  componentData: ComponentConfig
}

const props = defineProps<Props>()

// Emits
const emit = defineEmits<{
  update: [component: ComponentConfig]
  delete: [componentId: string]
}>()

// 响应式数据
const isCollapsed = ref(false)

// 计算容器样式
const containerStyle = computed(() => {
  const style = props.componentData.style || {}
  
  const computedStyle = {
    backgroundColor: style.backgroundColor || 'transparent',
    borderColor: style.borderColor || 'transparent',
    borderWidth: (style.borderWidth || 0) + 'px',
    borderRadius: (style.borderRadius || 0) + 'px',
    opacity: style.opacity !== undefined ? style.opacity : 1,
    boxSizing: 'border-box',
    ...style
  }
  
  console.log('ContainerComponent: containerStyle computed, style:', style)
  console.log('ContainerComponent: final computedStyle:', computedStyle)
  
  return computedStyle
})

// 切换折叠状态
const toggleCollapse = () => {
  isCollapsed.value = !isCollapsed.value
}
</script>

<style lang="scss" scoped>
.container-component {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  transition: all 0.2s ease;
  
  &.show-border {
    border: 1px solid #e4e7ed;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .container-title-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background-color: #f5f7fa;
    border-bottom: 1px solid #e4e7ed;
    min-height: 36px;
    
    .title-text {
      font-size: 14px;
      font-weight: 500;
      color: #303133;
      flex: 1;
    }
    
    .title-actions {
      display: flex;
      gap: 4px;
      
      .collapse-btn {
        background: none;
        border: none;
        cursor: pointer;
        padding: 4px;
        color: #909399;
        border-radius: 3px;
        transition: all 0.2s;
        
        &:hover {
          background-color: #e4e7ed;
          color: #606266;
        }
        
        i {
          font-size: 12px;
        }
      }
    }
  }
  
  .container-content {
    flex: 1;
    padding: 12px;
    overflow: hidden;
    
    .container-placeholder {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
      color: #c0c4cc;
      font-size: 14px;
      
      i {
        font-size: 24px;
        margin-bottom: 8px;
      }
    }
  }
  
  // 折叠状态
  &.collapsed {
    .container-content {
      display: none;
    }
  }
  
  // 悬停效果
  &:hover {
    &.show-border {
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }
  }
}
</style>
